﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="LocalEvents.Portal.WebForm1" %>
<%@ Register TagPrefix="AjaxData" Assembly="AjaxDataControls" Namespace="AjaxDataControls" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Local Events Portal</title>
    <link href="Style.css" rel="Stylesheet" />
    
    <script type="text/javascript">
            
        var _DivStatus = null;
            
        function pageLoad()
        {            
            _DivStatus = $get('divStatus');
            _DivStatus.style.display = 'none';
        }
        
        function search()
        {
            _DivStatus.style.display = 'block';           
            var searchText = $get('txtSearch').value;
            
            if(searchText == '')
            {
                _DivStatus.innerHTML = 'Please type a location.';
                $get('txtSearch').focus();
            }
            else
            {
                Sys.Net.WebServiceProxy.invoke(
                    "/LocalEventsWS.asmx",      // WebService Path
                    "SearchLocalEvents",        // Method name
                    true,                       // Use GET?
                    { location: searchText },   // Parameters
                    onEventsDownloadCompleted,  // On success callback
                    onEventsDownloadError);     // On failure callback
                    
                _DivStatus.innerHTML = 'Locating events...';
            }
        }
      
        function onEventsDownloadCompleted(result, eventArgs)
        {
            _DivStatus.style.display = 'none';
        
            var gridView = $find('<%= GridView1.ClientID %>');

            gridView.set_dataSource(result);
            gridView.dataBind();
        }
      
        function onEventsDownloadError(error)
        {
            _DivStatus.innerHTML = error.get_message();
        }
    
    </script>
</head>

    <body>
        
        <div id="inner">
        
            <div id="header">
                <h1>Local Events Portal</h1>
            </div>
            
            <div id="maincontent">
            
                <center>
                    <div>
                        Location: 
                        <input type="text" id="txtSearch" onkeydown="if(event.keyCode == 13) search();" />
                        <input type="button" id="btnSearch" value="Search" onclick="search()" />
                    </div>
                    <div id="divStatus" style="font-style: italic; padding: 10px;"></div>
                </center>
                <br />
            
                <form id="form1" runat="server">
                    
                    <asp:ScriptManager ID="ScriptManager1" runat="server">                    
                    </asp:ScriptManager>
                    
                    <div>
                        <AjaxData:GridView ID="GridView1" runat="server" CssClass="DataWebControlStyle" CellSpacing="0" CellPadding="3">
                           <AlternatingRowStyle CssClass="AlternatingRowStyle" />
                           <RowStyle CssClass="RowStyle" />
                           <HeaderStyle CssClass="HeaderStyle" />
                           <Columns>
                            <AjaxData:GridViewHyperLinkColumn HeaderText="Event" DataTextField="Title" DataNavigateUrlFields="URL" DataNavigateUrlFormatString="{0}" Target="_blank" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" ItemStyle-Width="300px" />
                            <AjaxData:GridViewBoundColumn HeaderText="Summary" DataField="Summary" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" />
                            <AjaxData:GridViewBoundColumn HeaderText="Date" DataField="EventDateTime" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Left" ItemStyle-VerticalAlign="Top" />
                           </Columns>
                        </AjaxData:GridView>                    
                    </div>
                    
                </form>
                
            </div>
       
       </div>
       
    </body>

</html>